<template>
  <div>
    <render-table
      ref="table"
      :apiUrl="listPurchase"
      :tableColumn="tableColumn"
      :otherConfig="otherConfig"
      :dict="dict"
      selection="multiple"
      :setupConfig="setupConfig"
      :searchConfig="searchConfig"
      :searchReset="searchReset"
      @edit="edit"
      @del="del"
    >
      <!-- <template v-slot:multiple-operation="{ selectionData }">
        <el-button
          type="success"
          size="small"
          @click="handleClick2(selectionData)"
          >批量操作2</el-button
        >
      </template> -->
      <!-- <template v-slot:searchBtn="{ searchData }">
        <el-button
          size="medium"
          type="primary"
          @click="handleAdd(searchData)"
          >新增</el-button
        >
      </template> -->
      <template v-slot:searchBtn="{  }">
        <el-button
          size="medium"
          type="primary"
          @click="handleAdd()"
          >新增</el-button
        >
      </template>
    </render-table>
    <!-- 添加或修改采购员信息对话框 -->
    <el-dialog @close="reset()" :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="采购员工号" prop="purchaseNum">
          <el-input v-model.trim="form.purchaseNum" placeholder="请输入采购员工号" />
        </el-form-item>
        <el-form-item label="采购员姓名" prop="name">
          <el-input v-model.trim="form.name" placeholder="请输入采购员姓名" />
        </el-form-item>
        <el-form-item label="电话" prop="phone" v-if="title === '添加采购员信息'">
          <el-input v-model.trim="form.phone" placeholder="请输入电话" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model.trim="form.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="密码" prop="password" >
          <el-input show-password v-model.trim="form.password" placeholder="请输入密码" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import {
  listPurchase,
  getPurchase,
  delPurchase,
  addPurchase,
  updatePurchase,
} from "@/api/purchase/api";

export default {
  name: "Purchase",
  data() {
    const validateNum = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请正确填写工号"));
      } else {
        var reg =
        /^\d*.?\d+$/;
        if (!reg.test(value)) {
          callback(new Error("请勿输入除数字以外字符"));
          return;
        }
        callback();
      }
    };
    const validatePhone = (rule, value, callback) => {
      const regExp = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
      if (!regExp.test(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    const validateEmail = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请正确填写邮箱"));
      } else {
        var reg =
          /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if (!reg.test(value)) {
          callback(new Error("请输入有效的邮箱"));
          return;
        }
        callback();
      }
    };
    return {
      searchReset: {
        purchaseNum: "",
        name: "",
      },
      searchConfig: [
        {
          type: "input",
          key: "purchaseNum",
          placeholder: "请输入工号",
        },
        {
          type: "input",
          key: "name",
          placeholder: "请输入姓名",
        },
      ],
      setupConfig: {
        edit: true,
        del: true,
      },
      dict: {},
      otherConfig: {
        list: "rows",
      },
      listPurchase,
      tableColumn: [
        { prop: "purchaseId", label: "采购员ID" },
        { prop: "purchaseNum", label: "采购员工号" },
        { prop: "name", label: "名称" },
        { prop: "phone", label: "电话" },
        { prop: "email", label: "邮箱" },
      ],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        purchaseNum: [
          { required: true, message: "采购员工号不能为空", trigger: "blur" },
          { required: true, validator: validateNum, trigger: "blur" },
        ],
        name: [
          { required: true, message: "采购员姓名不能为空", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "电话不能为空", trigger: "blur" },
          { required: true, validator: validatePhone, trigger: "blur" },
        ],
        email: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          { required: true, validator: validateEmail, trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        purchaseNum: null,
        name: null,
        phone: null,
        email:null,
        password:null
      };
      this.resetForm("form");
    },
    edit(row) {
      this.form = { ...row };
      delete this.form.createTime;
      this.open = true;
      this.title = "修改采购员信息";
    },
    del(row) {
      const purchaseIds = row.purchaseId || this.ids;
      this.$modal
        .confirm('是否确认删除采购员工号为"' + row.purchaseNum + '"的数据项？')
        .then(function () {
          return delPurchase(purchaseIds);
        })
        .then(() => {
          this.$refs.table.getData();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    // isSelectable(row){
    //   console.log('row',row)
    // },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
      this.title = "添加采购员信息";
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.purchaseId) {
            updatePurchase(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.$refs.table.getData();
        this.reset();
            });
          } else {
            addPurchase(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.$refs.table.getData();
      this.reset();
            });
          }
        }
      });
    },
  },
};
</script>
  